import { useState } from 'react';

export default function State () {
  const [count, setCount] = useState(0);

  const [obj, setObj] = useState({
    name: 'pipi',
    age: 18,
  })
  const changeName = () => {
    setObj({
      ...obj,
      name: 'pipi2',
    })
  }

  const onCountChange = () => {
    // setCount(count + 1) // 1
    // setCount(count + 1) // 1
    // setCount(count + 1) // 1

    // 更新函数
    setCount((prev) => prev + 1) // 1
    setCount((prev) => prev + 1) // 2
    setCount((prev) => prev + 1) // 3
  }

  return (
    <div>
      <h1>useState</h1>
      <div>count: {count}</div>
      <button onClick={onCountChange}>Add</button>
      <div>name: {obj.name}</div>
      <div>age: {obj.age}</div>
      <button onClick={changeName}>修改名字</button>
    </div>
  )
}